import React, { Component } from "react";

class Index extends Component {
  state = {
    msg: "",
    count: 1,
  };

  handleClick() {
    // 在react里面改变state，要使用setState()才有响应式，原理是对象的合并，不能直接赋值
    // 不推荐的
    // this.state.count = 5;
    // this.setState({});
    this.setState({ count: this.state.count + 1 });
    // this.setState({ count: this.state.count + 1 });
    // this.setState({ count: this.state.count + 1 });
    // this.setState({ count: this.state.count + 1 });
    // this.setState({ count: this.state.count + 1 });

    // this.setState((prev) => {
    //   console.log(prev);
    //   return { count: prev.count + 1 };
    // });
    // this.setState((prev) => {
    //   return { count: prev.count + 1 };
    // });
    // this.setState((prev) => {
    //   return { count: prev.count + 1 };
    // });
    // this.setState((prev) => {
    //   return { count: prev.count + 1 };
    // });
    console.log(this.state.count);

    // setState是异步的
    // 如果这次state改变的值要依赖于前一次的状态，最好是要改成函数的写法，并且接收一个参数prevState
    // this.setState((prevState) => {
    //   return {
    //     count: prevState.count + 1,
    //   };
    // });
    // this.setState((prevState) => {
    //   return {
    //     count: prevState.count + 1,
    //   };
    // });

    // setState还有第二个参数，第二个参数是回调函数
    // this.setState(
    //   {
    //     count: 5,
    //   },
    //   () => {
    //     console.log(this.state.count);
    //   }
    // );
    // this.setState(
    //   (prevState) => {
    //     return {
    //       count: prevState.count + 1,
    //     };
    //   },
    //   () => {
    //     console.log(this.state.count);
    //   }
    // );

    // setState是同步的还是异步的？
    // 1. 在合成事件里面是异步的
    // 2. 在生命周期里面是异步的
    // 3. 在定时器里面是同步的
    // 4. 在原生js里面是同步的
  }

  render() {
    console.log(123);
    return (
      <>
        <h3>setState</h3>
        <p>count的值为{this.state.count}</p>
        {/* react的合成事件 */}
        {/* <button onClick={this.handleClick.bind(this)}>btn</button> */}
        <button>btn</button>
      </>
    );
  }

  // 相当于mounted
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        count: this.state.count + 10,
      });
      this.setState({
        count: this.state.count + 10,
      });
      this.setState({
        count: this.state.count + 10,
      });
      console.log(this.state.count);
    }, 2000);
    document
      .querySelector("button")
      .addEventListener("click", this.handleClick.bind(this));
  }
}

export default Index;
